<template>
  <div class="change-icon-box flex-x">
    <div class="turn-box" :class="[page === 0 ? 'is-ban' : '']" @click="pre">
      <i class="iconfont icon-left1"></i>
    </div>
    <div class="flex-1 flex-x choose-icon-box mar-l-8 mar-r-8">
      <div class="icon-item-box" :class="[isSelect(index) ? '' : '']" v-for="(item, index) in nowList" :key="index" @click.stop="selectIt(index)">
        <img :src="item" />
      </div>
    </div>
    <div class="turn-box" :class="[haveNext ? '' : 'is-ban']" @click="next">
      <i class="iconfont icon-right1"></i>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, computed } from 'vue';
import { iconList } from './common';

export default defineComponent({
  name: 'ChangeIcon',
  props: {},
  setup(props, { emit }) {
    const current = ref(0);
    const page = ref(0);
    const list = iconList;
    const nowList = computed(() => list[page.value]);
    const haveNext = computed(() => list.length > page.value + 1);
    const selectItem = ref('0-0');
    function isSelect(index) {
      let page_ = selectItem.value.split('-')[0] * 1;
      let index_ = selectItem.value.split('-')[1] * 1;
      if (page_ === page.value && index_ === index) {
        return true;
      }
      return false;
    }
    function pre() {
      if (page.value === 0) return;
      page.value--;
    }
    function next() {
      if (!haveNext.value) return;
      page.value++;
    }
    function selectIt(index) {
      selectItem.value = `${page.value}-${index}`;
      emit('choose', selectItem.value);
    }
    function setData(e) {
      selectItem.value = e;
    }
    return {
      current,
      page,
      nowList,
      haveNext,
      pre,
      next,
      isSelect,
      selectIt,
      setData,
      list,
    };
  },
});
</script>
<style lang="scss" scoped>
.change-icon-box {
  width: 100%;
  .turn-box {
    width: 16px;
    height: 32px;
    background-color: #f7f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .icon-item-box {
    cursor: pointer;
    width: 12.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
      height: 100%;
      width: 40px;
      height: 40px;
      padding: 4px;
      border: 1px solid transparent;
    }
  }
  .is-select {
    border-color: $color-primary;
    background-color: rgba($color-primary, 0.1);
  }
  .choose-icon-box {
    // justify-content: space-between;
  }
  .is-ban {
    cursor: not-allowed;
    opacity: 0.6;
  }
}
</style>
